I have outlined or area filled icons like these that I am trying to calculate the width of their "stroke-width" in Javascript, given all the x, y positions for each of the vertices (marked as blue dots) and tangents, is there any efficient & accurate way to calculate the minimum "stroke-width"? not the smallest crossing point at the tip of the rocket fire but should be 1.5px in the example case.
I've tried by first comparing every line segment with every other line segment and find if they are parallel, and if they are parallel (same angle) I then store them into an array of all parallel lines, and then I loop through the array to find the shortest distance between the center point of every line a to line b. But this is super time consuming if performed on hundreds of vertices and the result is not always accurate, as the distance between two parallel line segements on an arched shape is shorter than it actually is, and there's no guarantee if any of the parallel line pairs are at perfect 90°
Another approach might be to dump it to canvas, and count filled pixels. Then change to fill non-zero, dump it to canvas again and count filled pixels. Subtract one from the other and this gives you the number of pixels in the "stroked" area. Divide that by the total length of your drawing paths (and adjust for viewBox units) It won't be exact, but it certainly seems much faster.